<!-- 参团列表 -->
<template>
	<view>
		<view class="goods_groupbuy" v-if='groupData'>
			<view class="goods_groupbuy_h flex-box flex-between align-center">
				<text class="txt">{{groupData.length}}人已发起团购，可直接参团</text>
				<view class="more flex-box align-center" @click="showMore=true">
					<text>查看更多</text>
					<text class='iconfont icon-xiangyouxiayiye'></text>
				</view>
			</view>
			<view class="goods_groupbuy_list">
				<swiper :style="groupData.length>1?'height:220rpx':'height:110rpx'" :display-multiple-items='groupData.length>1?2:1' circular class="swipeJoin" vertical :autoplay="true" :interval="3000" :duration="1000">
					<swiper-item v-for='(group,gid) in groupData' :key='gid'>
						<view class="goods_groupbuy_item flex-box flex-between align-center">
							<view class="g_buy_info">
								<view class="g_buy_avatar">
									<image :style="{'z-index':group.groupUsers.length - hid}" v-for='(head,hid) in group.groupUsers' :key='hid' :src="head.v_headimg" mode="aspectFill"></image>
								</view>
							</view>
							<view class="g_buy_time">
								<view class="g_buy_r">还差{{group.missPeople}}人成团</view>
								<view class="g_buy_over_time">
									剩余<counTime :time="group.gameOver"></counTime>
								</view>
							</view>
							<view @click='toOrderList("/pages/group/tuxedo?gid="+group.goods_id+"&num="+group.group_number+"&group_id="+group.group_id+"&share_v_id="+group.main_v_id+"&aid="+group.act_id)'
							 class="joinBtn thmeBg" :style="{'--color': color}">去参团</view>
						</view>
					</swiper-item>
				</swiper>
			</view>
		</view>
		<view v-if='showMore' class="mask flex-box align-center" @click="showMore=false">
			<view>
				<view class="moreList" @click.stop>
					<view class="moreListTitle">正在团购</view>
					<view class="peopleList">
						<view class="myItem" v-for='(group,gid) in groupData' :key='gid'>
							<view class="goods_groupbuy_item flex-box flex-between align-center">
								<view class="g_buy_info">
									<view class="g_buy_avatar">
										<image :style="{'z-index':group.groupUsers.length - hid}" v-for='(head,hid) in group.groupUsers' :key='hid' :src="head.v_headimg" mode="aspectFill"></image>
									</view>
								</view>
								<view class="g_buy_time">
									<view class="g_buy_r">还差{{group.missPeople}}人成团</view>
									<view class="g_buy_over_time">
										剩余<counTime :time="group.gameOver"></counTime>
									</view>
								</view>
								<view @click='toOrderList("/pages/group/tuxedo?gid="+group.goods_id+"&num="+group.group_number+"&group_id="+group.group_id+"&share_v_id="+group.main_v_id+"&aid="+group.act_id)'
								 class="joinBtn thmeBg" :style="{'--color': color}">去参团</view>
							</view>
						</view>
					</view>
				</view>
				<text class="iconfont icon-guanbi" @click="showMore=false"></text>
			</view>
		</view>
		<showModel @cancelFunc='cancelFunc' v-if='showModal' type='2'></showModel>
	</view>
</template>

<script>
	import Count from './count-down/count-down.vue'
	export default {
		props: ['groupData'],
		components:{
			counTime: Count
		},
		data() {
			return {
				color: getApp().globalData.color,
				showModal:false,
				showMore: false ,// 查看更多
				// groupData:['']
			}
		},
		created() {
			console.log(this.groupData)
		},
		methods:{
			cancelFunc(){
			    this.showModal = false;
			},
			toOrderList: function(url) {
				var that = this;
				var vid = uni.getStorageSync("vid")
				if (!vid) {
					that.showModal = true;
				} else {
					uni.navigateTo({
						url: url
					})
				}
			},
		}
	}
</script>

<style scoped>
	.swipeJoin{height: 220rpx;}
	.goods_groupbuy {
		margin: 20rpx 0;
		background: #ffffff;
	}

	.goods_groupbuy .goods_groupbuy_h {
		height: 88rpx;
		line-height: 88rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		border-bottom: 1px solid #eeeeee;
		padding: 0 30rpx;
	}
	.goods_groupbuy .goods_groupbuy_h .txt{
		font-size: 28rpx;
	}
	.goods_groupbuy .goods_groupbuy_list {
		overflow-x: hidden;
		-webkit-overflow-scrolling: touch;
		padding: 0 30rpx  20rpx;
	}
	.more text{
		color: #999;
	}
	.icon-xiangyouxiayiye{
		font-size: 28rpx;
		color: #999999;
	}

	.goods_groupbuy_item {
		position: relative;
		padding: 10rpx 0;
	}

	.goods_groupbuy_item:before {
		content: "";
		width: 100%;
		height: 0;
		border-bottom: 1px solid #FAFAFA;
		position: absolute;
		top: 100%;
		left: 0;
		z-index: 1;
	}

	.goods_groupbuy_item .g_buy_info {
		display: flex;
		display: -webkit-flex;
		align-items: center;
		flex: 1;
	}

	.g_buy_info .g_buy_avatar {
		flex: 1;
		margin-right: 20rpx;
		display: flex;
		display: -webkit-flex;
		flex-wrap: nowrap;
		overflow-x: auto;
	}

	.g_buy_avatar image {
		width: 80rpx;
		height: 80rpx;
		border: 2px solid #ffffff;
		border-radius: 50%;
		margin-right: -48rpx;
		position: relative;
	}
	.g_buy_time .g_buy_r {
		
		font-size: 28rpx;
	}

	.g_buy_time .g_buy_over_time {
		
		color: #999999;
	}
	.joinBtn{color: white;margin-left: 20rpx;
	width: 140rpx;border-radius: 8rpx;
    line-height: 68rpx;text-align: center;font-size: 26rpx;
	}
	.mask{justify-content: center;}
	.moreList{width: 650rpx;background-color: #FFFFFF;border-radius: 24rpx;}
	.moreListTitle{line-height: 88rpx;text-align: center;font-size: 34rpx;font-weight: bold;border-bottom: 1px solid #EEEEEE;}
	.peopleList{padding: 30rpx;max-height: 66vh;overflow-y: auto;}.myItem{margin-bottom: 20rpx;}
	.icon-guanbi{display: block!important;margin: 30rpx auto 0; text-align: center;}
</style>
